Whether you are creating a website, writing your resume or designing a presentation, the fonts or typeface you choose can make a notable difference. The Google Fonts directory offers a myriad of choices but how do you pick the correct font for your digital projects? Should you go for Serif fonts or Sans Serif or a combination of serifs and sans serifs?

Typography is an art and, with thousands of fonts available, it is obviously difficult for non-designers to find that perfect font combination. Need help? Here are some useful font pairing websites where type masters have already done the hard work and all you can do is follow their recommendations to pick the most elegant and gorgeous Google fonts combination for your web and print projects.

1. Beautiful Web Type (hellohappy.org) – Chad Mazzola has created a beautiful showcase of high-quality typefaces from the Google Fonts website. You’ll discover some creative usage of fonts here though they haven’t updated the site for quite some time.

2. Typ.io (typ.io) – If the body text of my website is set in Roboto, what font should I use for headings? Typ.io offers a visual list of beautiful websites that using similar font families and helps you pick the perfect matching pair based on the typography of other websites.

3. Google Type (femmebot.github.io) – Phoebe Espiritu’s typography project uses Google Fonts to stylize tales from Aesop’s Fables. This is a great reference source for finding elegant font pairs and is regularly updated as well.

4. Palet Tab (palettab.com) – A Google Chrome extension that inspires you with a fresh font and color combination from Google Fonts each time you open a new tab in Chrome.

5. 100 Days of Fonts (100daysoffonts.com) – Each single day, for 100 days, designer Do-Hee Kim picked a unique and beautiful Google Fonts pair and all her work in now showcased in this single-page website. If you need inspiration for fonts, look no further.

6. Font Pair (fontpair.co) – Another well-designed resources for finding Google Fonts that go well together. The paired fonts can be downloaded as zip files which is handy in case you want to use the fonts with your PowerPoint presentation on the local computer.

7. Font Blender (andreasweis.com/webfontblender) – If you are wondering how a set of Google Fonts will look with your text, Font Blender can help. The web app allows you to preview Google Fonts in the browser and you have the option to experiment with the font size and line height as well.

8. Type Genius (typegenius.com) – Choose a starter web font and Type Genius will recommend a list of other matching fonts that will make a good combination. Like Typ.io, this website too makes suggestions based on font combinations of other beautiful websites. Designed by Waveney Hudlin.

9. Type Source (typesource.com) – A beautiful showcase of heading and text blocks stylized using Google Fonts. Tobias Ahlin, the site creator, has included the necessary HTML & CSS code making it easy for your to replicate the styles in your own web design. The text is editable as well so you can also preview the same design with your own text.

10. Font Face Ninja (fontface.ninja) – A browser extension for Google Chrome and Safari browsers that will help you recognize the font used on any website. You even have the option to download the font files through the Ninja add-on but do check the associated license.

Also see: How to Reduce Google Fonts Size

Google Forms are a perfect tool for creating online forms and surveys. The forms are responsive and mobile friendly, and they look beautiful as the colors and typography are based on Material design philosophy. Whether you need a basic Contact Me form to a more complex Event Registration form, there are readymade form templates to get you up and ruing in minutes.

There are other advantages too with using Google Forms. The form responses are automatically saved in a Google spreadsheet that can be easily exported to other formats like PDF or CSV. Unlike other online form builders that follow the freemium model, Google Forms are absolutely free and can accept unlimited responses . You can also schedule Google Forms to stop accepting responses after a given date.

There’s one limitation though with Google Forms.

Google Forms can send email notifications as soon as people submit your form but, as you would notice in the screenshot, the form data submitted by the respondent is not included in the email message. You’ll have to open the Google Form, or the associated Google Spreadsheet that is collecting the form responses, to view the submitted data. Not a very convenient option.

If you would like to receive the submitted data in an email message, the Email Notification for Google Forms add-on can help. The add-on, written using Google Scripts, gets triggered whenever a user submits your Google Form and emails the form data to one or more email addresses specified by the form owner in rich HTML or PDF formats.

How to Receive Google Forms data in Email

Here’s how you can add email notifications to any Google Form in 5 easy steps:

1. Install the Google Forms add-on, then click the add-ons icon inside the Forms Editor (it is the shape of a puzzle icon), choose the Email Notification for Form menu and then click the Create New Rule menu.
2. The configuration window will open inside the form editor. Enter your full name (or the sender’s name) and also specify the list of one or more email addresses (comma separated) who should receive automatic email notifications when a form is submitted.
3. If you would like to send an auto-confirmation email to the form’s respondent after they submit the form, check the Notify Submitter option. You’ll also need to select the question in your Google Form that asks the respondent for their email address.
4. Go to the next screen and enter the subject line and message body of the email notification. You can customize the emails and include any of the {{form fields}} in the subject or body as explained in the next section.
5. Click the Create Rule button to activate the form notification. Now open your Google Form, submit a test entry and then go to your Gmail Sent Items folder to see the email notification that has gone out to the recipients.

How to Create Customized Notification Emails

You can easily include dynamic fields from the Google form into the email subject line and message body. For instance, if you have a question titled “Name?” in the Google Form, you can include the template variable {{Name?}} in the subject or body and they’ll be automatically replaced with the actual data entered by the user.

Other than the form fields, the add-on also supports a few generic template variables like:

Variable	Replaced with
{{Form Name}}	Name (title) of your Google Form
{{Form Url}}	Direct link to edit a user’s response
{{Response Number}}	The current number of Form entry
{{All Answers}}	Full response, formatted as a table

Format your Notification Emails with HTML

The form notification emails are created in HTML and you can therefore use any HTML tags to format the emails. For instance, if you an enclose the text inside <b>tag</b>, it will tu bold in the email while <em>tag</em> will italicize the text. Use the span tags to change the font color as show in the following example:

<span style="color:green;background:yellow">Thank you!</span>

If you would like to include your brand’s logo in the email message, simply upload the image and copy-paste the HTML code provided into the email body.

Conditional Email Notifications using If-Then Logic

The forms add-on can also send email notifications to different people based on the answers that are filled in the form. For instance:

• In a sales form, you can send a notification to a particular sales manager based on the product category selected by the user.
• In a school form, you can send notifications to the conceed teacher based on the grade selected by the parent / student.

You can use simple rules, like region equals North America, or build more complex rules using regular expressions. Conditional notifications are however available in the premium version only.

How to Pause Email Notifications from Google Forms

Go to the Form Editor – Add-ons – Email Notification for Google Forms – Manage Rule and delete the email notification from the list.

Related: Google Forms do not allow file uploads but you can use Google Scripts to allow anyone to upload files via a form to your Google Drive.

Adobe PDF may be the most popular document format on the web but there’s a reason why eBook lovers prefer the ePub format over PDF. PDF documents have a static layout with fixed page breaks but the layout of an ePUB document is “responsive” meaning it will automatically adjust for different screen sizes.

You can read an ePub book on your desktop or inside the Google Play Books app on your Android phone and they’ll look good. Also, since ePub files are essentially HTML5 documents under the hood, the text size and font family can be easily adjusted for an improved reading experience.

How to Create your ePUB eBooks

Adobe Stanza and Calibre are popular desktop software for creating ePub ebooks but now can now easily make one in the browser using Google Docs itself. Just write a document in Google Document, or upload an existing Microsoft Word file to your Google Drive, go to File menu and choose download as EPUB publication.

Here’s an ePUB version of this article, generated with Google Docs.

You get an ePub file that you can copy to your mobile phone or, better still, upload the ePub to the Google Books website and access the ebook from anywhere. You can even read it in the browser. To upload an eBook to Google Books, go here and click the Upload Files button. The files are only visible to you.

ePub files are readable on iPad, Nook and Google Play books. Amazon Kindle doesn’t support the ePub format but there’s an easy way to convert ePub into MOBI format that is supported by Kindle.

You have been using Google Analytics to track visitors (or page views) on your website but did you know that the same analytics service can also be used for tracking views inside Google Spreadsheets. You insert a little snippet of tracking code inside your spreadsheet and when someone opens the sheet, that visit will be recorded permanently in your Google Analytics account.

Google Analytics provides a JavaScript snippet that can be inserted into web templates for tracking visits. You caot insert JavaScript inside the cells of a Google Spreadsheet but we can use the IMAGE function combined with some Apps Script to enable tracking inside spreadsheet. The visit is recorded as an “event” and not a “page view” and thus your spreadsheet opens will not artificially inflate your Google Analytics reports.

To get started, go to your Google Analytics dashboard and make a note of the Google Analytics tracking ID which is a string like UA-12345-67. This web tutorial explains how you can locate the ID inside your Analytics dashboard.

Now open any Google Spreadsheet that you wish to track and go to Tools, Script Editor and copy-paste the following code. This is a custom Google Spreadsheet function that will embed the 1×1 tracking GIF image in our spreadsheets.

/**
 * Track Spreadsheet views with Google Analytics
 *
 * @param {string} gaaccount Google Analytics Account like UA-1234-56.
 * @param {string} spreadsheet Name of the Google Spreadsheet.
 * @param {string} sheetname Name of individual Google Sheet.
 * @retu The 1x1 tracking GIF image
 * @customfunction
 */

function GOOGLEANALYTICS(gaaccount, spreadsheet, sheetname) {
  
  /** 
  * Written by Amit Agarwal 
  * Web: www.ctrlq.org 
  * Email: amit@labnol.org 
  */
  
  var imageURL = [
    "https://ssl.google-analytics.com/collect?v=1&t=event",
    "&tid=" + gaaccount,
    "&cid=" + Utilities.getUuid(),
    "&z="   + Math.round(Date.now() / 1000).toString(),
    "&ec="  + encodeURIComponent("Google Spreadsheets"),
    "&ea="  + encodeURIComponent(spreadsheet || "Spreadsheet"),
    "&el="  + encodeURIComponent(sheetname || "Sheet")
  ].join("");
  
  retu imageURL;

}

Save the code, close the Apps Script editor window and retu to the spreadsheet.

Click an empty cell and insert the following formula. The cell will be blank but it contains an embedded image. You may want to change the background color so it is easy to figure out which cell in the spreadsheet contains the tracking formula.

The GOOGLEANALYTICS() formula takes 3 parameters – the analytics ID, the spreadsheet name and the sheet name. This helps if you would like to separately track individual sheets inside a spreadsheet.

Now open the spreadsheet in a new browser window and go to Google Analytics, Real Time, Overview to test if the tracking is working. It may sometimes take a minute to record the visit. If you would like to see all the visits, go to Behavior – Events – Overview and click on the Google Spreadsheets category.

Also see: Track Gmail Messages with Google Analytics

The tracking would work even if the user has enabled ad blocking and that’s because Google Spreadsheets, like Gmail, serves images through a proxy server. The downside is that you will never know the location of the visitor since all visits will be show up as United States (the location of Google servers).

Open the Google website on your desktop computer and you’ll find a little microphone icon embedded inside the search box. Click the icon, say something and your voice is quickly transcribed into words. Unlike earlier speech recognition products, you no longer have to train the browser to understand your speech and, for those who don’t know touch typing, speech is often a faster mode of input than the keyboard.

Sounds like magic, right? Well, did you know that you can also include similar speech recognition capabilities to your own website with a few lines of code. Visitors can search your website, or even fill forms, using just their voice. Both Google Chrome and Firefox browsers support the speech recognition API.

Before we dive into the actual implementation, let’s play with a working demo. If you are viewing this page inside Google Chrome (desktop or mobile), click the voice icon inside the search box and say a search query. You may have allow the browser to access your microphone. When you are done speaking, the search results page will open automatically.

Add Voice Recognition to your Website

The HTML5 Web Speech API has been around for few years now but it takes slightly more work now to include it in your website.

Earlier, you could add the attribute x-webkit-speech to any form input field and it would become voice capable. The x-webkit-speech attribute has however been deprecated and you are now required to use the JavaScript API to include speech recognition. Here’s the updated code:

<!-- CSS Styles -->
<style>
  .speech {border: 1px solid #DDD; width: 300px; padding: 0; margin: 0}
  .speech input {border: 0; width: 240px; display: inline-block; height: 30px;}
  .speech img {float: right; width: 40px }
</style>

<!-- Search Form -->
<form id="labnol" method="get" action="https://www.google.com/search">
  <div class="speech">
    <input type="text" name="q" id="transcript" placeholder="Speak" />
    <img onclick="startDictation()" src="//i.imgur.com/cHidSVu.gif" />
  </div>
</form>

<!-- HTML5 Speech Recognition API -->
<script>
  function startDictation() {

    if (window.hasOwnProperty('webkitSpeechRecognition')) {

      var recognition = new webkitSpeechRecognition();

      recognition.continuous = false;
      recognition.interimResults = false;

      recognition.lang = "en-US";
      recognition.start();

      recognition.onresult = function(e) {
        document.getElementById('transcript').value
                                 = e.results[0][0].transcript;
        recognition.stop();
        document.getElementById('labnol').submit();
      };

      recognition.onerror = function(e) {
        recognition.stop();
      }

    }
  }
</script>

We have the CSS to place the microphone image inside the input box, the form code containing the input button and the JavaScript that does all the heavy work.

When the user click the mic image inside the search box, the JavaScript checks if the user’s browser supports speech recognition. If so, it waits for the transcribed text to arrive from Google servers and then submits the form.

The Dictation App also uses the speech recognition API though it writes the transcribed text to textarea field instead of an input box.

Some notes:

1. If the HTML form / search box is embedded inside an HTTPS website, the browser will not repeatedly ask for permission to use the microphone.
2. You can change the value of the recognition.lang property from ‘en-US’ to another language (like hi-In for Hindi or fr-FR for Français). See the complete list of supported languages.

Do you need a quick organization chart to show the hierarchy of employees in your business? Well, just open a blank Google Spreadsheet, put the employee names in a column and your org charge should be ready in minutes. Here’s a sample org chart created with nothing but Google Sheets.

Create Organizational Charts with Google Spreadsheets

Here’s how you can put together an org chart in Google Sheets. It will be a live chart meaning as you update the employee names or hierarchy in the spreadsheet, the org chart would update itself. Let’s get started.

Step 1. Open a Google Sheet and put the employee names in column A and the names of the immediate managers in Column B.

Step 2. Select the cells that you’ve just entered and choose Chart from the Insert menu in the spreadsheet.

Step 3. The Chart Editor will open inside Google Sheets. Switch to the Chart Types tab and uncheck the option that says “Aggregate Column A.” Then scroll down the list of available chart types, choose “Organizational Chart” and click Insert to add the chart into your spreadsheet.

Unlike flowcharting tools like Visio, you don’t have enough formatting options for org charts in Google Sheets except for changing the background and fill colors of various nodes in the chart. And if you hit the little drop-down arrow in the chart box, you’ll see an option to download the charge as a PNG image for embedding on other websites.

Github, in simple English, is a website for hosting source code. The site is built for programmers and, if you are not one, it is highly unlikely that you have ever used Github. Repositories and Forks, the basic building blocks of Github, may seem like second-nature to developers but, for everyone else, Github continues to be a complicated beast.

Github isn’t just a place for developers though. The site can be used a writing platform. It can host HTML websites. You can use Github to visually compare the content of two text files. The site’s Gist service can used for anonymous publishing and as a tasklist. There’re so many things do on Github already and you can how use it as a free file hosting service as well.

How to Host Files on Github

It takes few easy steps to tu your Github into a file repository. You can upload files from the browser and you can add collaborators so they can also upload files to a common repository (similar to shared folders in Google Drive). The files are public so anyone can download them with a direct link. The one limitation is that the individual files caot be larger than 25 MB each. There are no known bandwidth limits though.

Step 1: Go to github.com and sign-up for a free account, if you don’t have one. Choose the free plan as that’s all we need for hosting our files.

Step 2: Click the “New Repository” button, or go to github.com/new, to create a new repository for hosting your files. You can think of a repository as a folder on your computer.

Step 3: Give your repository a name and a description and click the Create button. It helps to have a description as it will help others discover your files on the web. You can have Private repositories too but that requires a monthly subscription.

Step 4: Your repository will initially be empty. click the Import Code button on the next screen to initialize the repository.

Step 5: Paste the URL https://github.com/labnol/files.git into the repository field and click Begin Import to create your Github repository for hosting files.

Upload Files to Github

Your Github repository is now ready. Click the Upload Files files button and begin uploading files. You can drag one or more files from the desktop and then click Commit Changes to publish the files on the web. Github will accept any file as long as the size is within the 25 MB limit.

Github has a built-in previewer for PDF, text and image files (including animated GIFs) so anyone can view them without downloading the actual file. Else there’s a simple URL hack to get the raw (downloadable) version of any file hosted on Github.

Direct URLs for Github Files

After the file has been uploaded to Github, click the filename in the list and you’ll get the file’s URL in the browser’s address. Append ?raw=true to the URL and you get a downloadable / embeddable version.

For instance, if the file URL is github.com/labnol/files/hello.pdf, the direct link to the same file would be github.com/labnol/files/hello.pdf?raw=true. If the uploaded file is an image, you can even embed it in your website using the standard img tag.

Here’s a sample file repository on Github. The T-Rex image is here and the direct link is here. You can go to the Repository settings and add one or more collaborators. They’ll get write access to your repository and can then add or delete files.